/**
* 功能描述: 带有分页的表格
* @author 崔孝楠
* @date 2022/10/8 11:30
* @version 1.0
*/
<template>
  <span>带分页表格</span>
  <div class="yw-table-wrapper">
    <div class="yw-table">
      <div class="yw-table-container">
        <div class="yw-table-content">
          <table style="table-layout: auto;">
            <!-- 表头 -->
            <thead class="yw-table-thead">
              <tr>
                <th class="yw-table-cell" colstart="0" colend="0">
                    <span>
                      <span role="img" aria-label="smile" class="ywicon ywicon-smile">
                        <svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                          <path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path>
                        </svg>
                      </span> Name </span>
                </th>
                <th class="yw-table-cell" colstart="1" colend="1">
                  Age
                </th>
                <th class="yw-table-cell" colstart="2" colend="2">
                  Address
                </th>
                <th class="yw-table-cell" colstart="3" colend="3">
                  Tags
                </th>
                <th class="yw-table-cell" colstart="4" colend="4">
                  Action
                </th>
              </tr>
            </thead>
            <!-- tbody -->
            <tbody class="yw-table-tbody">
              <tr data-row-key="1" class="yw-table-row">
                <td class="yw-table-cell">
                  <a>John Brown</a>
                </td>
                <td class="yw-table-cell">
                  32
                </td>
                <td class="yw-table-cell">
                  New York No. 1 Lake Park
                </td>
                <td class="yw-table-cell">
                    <span>
                      <span class="yw-tag yw-tag-green">
                        NICE
                      </span>
                      <span class="yw-tag yw-tag-geekblue">
                        DEVELOPER
                      </span>
                    </span>
                </td>
                <td class="yw-table-cell">
                    <span>
                      <a>Invite 一 John Brown</a>
                      <div class="yw-divider yw-divider-vertical" role="separator"></div>
                      <a>Delete</a>
                      <div class="yw-divider yw-divider-vertical" role="separator"></div>
                      <a class="yw-dropdown-link">
                        More actions
                        <span role="img" aria-label="down" class="ywicon ywicon-down">
                          <svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                          </svg>
                        </span>
                      </a>
                    </span>
                </td>
              </tr>
              <tr data-row-key="2" class="yw-table-row">
                <td class="yw-table-cell">
                  <a>Jim Green</a>
                </td>
                <td class="yw-table-cell">
                  42
                </td>
                <td class="yw-table-cell">
                  London No. 1 Lake Park
                </td>
                <td class="yw-table-cell">
                  <span>
                    <span class="yw-tag yw-tag-volcano">
                      LOSER
                    </span>
                  </span>
                </td>
                <td class="yw-table-cell">
                  <span>
                    <a>Invite 一 Jim Green</a>
                    <div class="yw-divider yw-divider-vertical" role="separator"></div>
                    <a>Delete</a>
                    <div class="yw-divider yw-divider-vertical" role="separator"></div>
                    <a class="yw-dropdown-link">
                      More actions
                      <span role="img" aria-label="down" class="ywicon ywicon-down">
                        <svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                          <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                        </svg>
                      </span>
                    </a>
                  </span>
                </td>
              </tr>
              <tr data-row-key="3" class="yw-table-row">
                <td class="yw-table-cell">
                  <a>Joe Black</a>
                </td>
                <td class="yw-table-cell">
                  32
                </td>
                <td class="yw-table-cell">
                  Sidney No. 1 Lake Park
                </td>
                <td class="yw-table-cell">
                    <span>
                      <span class="yw-tag yw-tag-green">
                        COOL
                      </span>
                      <span class="yw-tag yw-tag-geekblue">
                        TEACHER
                      </span>
                    </span>
                </td>
                <td class="yw-table-cell">
                    <span>
                      <a>Invite 一 Joe Black</a>
                      <div class="yw-divider yw-divider-vertical" role="separator"></div>
                      <a>Delete</a>
                      <div class="yw-divider yw-divider-vertical" role="separator"></div>
                      <a class="yw-dropdown-link">
                        More actions
                        <span role="img" aria-label="down" class="ywicon ywicon-down">
                          <svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                          </svg>
                        </span>
                      </a>
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <yw-simple-pagination />
  </div>
</template>

<script>
import YwSimplePagination from "../SimplePagination/index.vue";
export default {
  name: "tableWithPagination",
  components: {YwSimplePagination}
}
</script>

<style scoped>

</style>
